[日本語Alexa] APLにおけるFrameコンポーネントの使い所

音声アシスタント特集

#AWS

#APL

#Amazon Alexa

SIN

2019.07.11

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1 はじめに

CX事業本部の平内（SIN）です。

Amazon AlexaのAPLを構成するFrameコンポーネントは、1つの子コンポーネントを保持し、境界線と背景の色を持つコンポーネントです。このコンポーネントの主な使い所は、以下の２つだと思います。

背景を持たないコンポーネントの装飾
絶対位置指定でのコンポーネント配置

今回は、このようなFrameコンポーネントの使い方について、確認してみたいと思います。

1 背景を持たないコンポーネントの装飾

Frameコンポーネントは、背景色や、ボーダーの指定が可能であることから、これに含まれるコンポーネントの装飾に利用することが可能です。背景が無いコンポーネントの代表例として、Textコンポーネントを使用して確認してみました。

下の図は、Containerの中にTextコンポーネントを均等に３つ配置したものです。そして、２番目のTextコンポーネントをFrameコンポーネントでつつみ、背景色やボーター（角丸）を指定したものです。

ちょっと注意が必要なのは、図を見ると分かるように、ボーダーの幅分だけ、内部のコンポーネントが相対的にズレるところです。センターリングなどが、思い通り行かなくなった時、この事を思い返す必要がありそうです。

(1) 背景色

背景色は、backgroundColorで設定します。デフォルトはtransparentとなっています。

(2) ボーダー

ボーダーは、borderColor及び、borderWidthで設定します。よくある、ドットなどのスタイル指定はありません。

(3) 角丸

角丸については、下記で設定します。なお、すべての値は絶対値のディメンションとなりあす。

borderRadius
borderBottomLeftRadius
borderBottomRightRadius
borderTopLeftRadius
borderTopRightRadius

    "mainTemplate": {
        "parameters": [
            "payload"
        ],
        "items": [
            {
                "type": "Container",
                "width": "100%",
                "height": "100%",
                "paddingLeft": "0",
                "paddingTop": "0",
                "paddingRight": "0",
                "paddingBottom": "0",
                "items": [
                    {
                        "type": "Text",
                        "width": "auto",
                        "height": "33vh",
                        "textAlign": "center",
                        "textAlignVertical": "center",
                        "fontSize": "16dp",
                        "text": "Type in the text for your layout..."
                    },
                    {
                        "type": "Frame",
                        "width": "auto",
                        "height": "33vh",
                        "item": [
                            {
                                "type": "Text",
                                "width": "100vw",
                                "height": "33vh",
                                "textAlign": "center",
                                "textAlignVertical": "center",
                                "color": "black",
                                "fontSize": "16dp",
                                "text": "Type in the text for your layout..."
                            }
                        ],
                        "backgroundColor": "cyan",
                        "borderColor": "red",
                        "borderRadius": "100px",
                        "borderWidth": "10px",
                        "position": "relativee"
                    },
                    {
                        "type": "Text",
                        "width": "auto",
                        "height": "33vh",
                        "textAlign": "center",
                        "textAlignVertical": "center",
                        "fontSize": "16dp",
                        "text": "Type in the text for your layout..."
                    }
                ]
            }
        ]
    }
}

3 絶対位置指定でのコンポーネント配置

各コンポーネントは、デフォルトで、親や上位に位置するコンポーネントからの相対位置で配置されます。しかし、Frameには、positionというプロパティがあり、これをabsoluteに設定することで絶対位置で指定が可能になります。

positionは、FrameコンポーネントとContainerコンポーネントにしか存在しないため、軽易に１つの画像などを重ねて置きたい場合は、重宝するかも知れません。

下記の図は、以下のように設定されています。

position: absolute
top: 10vh
left: 15vw

{
    "type": "APL",
    "version": "1.1",
    "settings": {},
    "theme": "dark",
    "import": [],
    "resources": [],
    "styles": {},
    "onMount": [],
    "graphics": {},
    "commands": {},
    "layouts": {},
    "mainTemplate": {
        "parameters": [
            "payload"
        ],
        "items": [
            {
                "type": "Container",
                "width": "100%",
                "height": "100%",
                "items": [
                    {
                        "type": "Image",
                        "width": "100vw",
                        "height": "100vh",
                        "source": "https://d1eju4ngjniac3.cloudfront.net/dog.jpg"
                    },
                    {
                        "type": "Frame",
                        "width": "20vw",
                        "height": "50vh",
                        "item": [
                            {
                                "type": "Image",
                                "width": "20vw",
                                "height": "50vh",
                                "source": "https://d1eju4ngjniac3.cloudfront.net/dog.jpg"
                            }
                        ],
                        "position": "absolute",
                        "left": "15vw",
                        "top": "10vh"
                    }
                ]
            }
        ]
    }
}